import Overlay from 'ol/Overlay'
import $ from 'jquery'

// 自定义Overlay基类，组合模式包装ol.overlay
class TyOverlayex {
  constructor(options) {
		this.id = options.id
		this.stopEvent = options.stopEvent || false
		this.offset = options.offset
		this.position = options.position
		this.container = options.container
		this.positioning = options.positioning ? options.positioning : 'top-left'
  }

  getHtmlElement() {
		return this.container
  }

  createHtmlElement() {
		return this.container
  }

  getOverlay() {
		return this.overlay
  }

  getId() {
		return this.id
  }

  createOverlay() {
		this.overlay = new Overlay({
			id: this.id,
			position: this.position,
			element: this.createHtmlElement(),
			offset: this.offset,
			stopEvent: this.stopEvent,
			positioning: this.positioning
		})
		return this.overlay
  }

  setPosition(pos) {
		this.position = pos
		if (this.overlay) {
			this.overlay.setPosition(pos)
		}
  }

  setOffset(offset) {
		this.offset = offset
		if (this.overlay) {
			this.overlay.setOffset(offset)
		}
  }

  addEventListener(event, handler) {
		if (this.overlay) {
			const dom = this.overlay.getElement()
			dom.addEventListener(event, function(e) {
				console.log('event', event)
				console.log('e', e)
				handler(this, e)
			})
		}
  }

  setFlag(obj) {
		this.flag = obj
  }

  setContent(content) {
		$(this.container).empty()
		this.content = content
		$(this.container).html(content)
  }

  openPopup(olMap, popup) {
		if (this.overlay) {
			popup.openPopup(olMap, this.position, popup.content)
		}
  }

  hide() {
		this.container.style.display = 'none'
  }

  show() {
		this.container.style.display = 'block'
  }

  setIndex(index) {
		$(this.container).css('z-index', index)
  }

  dispose() {
		if (this.overlay) {
			this.overlay.getMap().removeOverlay(this.overlay)
		}
		this.overlay = null
		$(this.container).remove()
  }
}

export default TyOverlayex
